<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<style>
    header{

        background-color: black;
        height: 50px;
    }

    #div{
        background-image: url("image/bannerbg.png");

        height: 420px;
        width: 100%;
        padding-top: 20px;
    }
    #ul{
        padding-top: 65px;

    }
    #images{
        height: 290px;
        width: 540px;
    }
    /*.col-md-7{

        padding-left: 30px;
        padding-top: 33px;
    }

    .col-md-3{
        background-color: white;
        height: 350px;
        width: 320px;
        margin-top: 33px;
        margin-left: 250px;
    }*/
    .bg{
        background-color: white;
        height: 350px;
        width: 320px;
        /*margin-top: 33px;*/
        /*margin-left: 240px;*/
    }
    .divs{
        padding-top: 20px;
    }
    .ulimg img{
        height: 250px;
        width: 170px;
    }
    .ulimg{
        height: 320px;
        width: 180px;
        border: 1px solid ;
        text-align: center;
    }
    .ulimgs{
        height: 355px;
        width: 180px;
        border: 1px solid ;

    }
.ss{

    height: 330px;
    width: 410px;
    border: 1px solid ;

}
</style>
<body>
<header>

    <div class="row">
    <nav  id="id" >
    <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a    style="padding-bottom: 5px"><img src="image/footer_logo.png"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
    <li class="active"><a href="#" style="color: white">全国 <span class="sr-only">(current)</span></a></li>

    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">演出 <span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">One more separated link</a></li>
    </ul>
    </li>
    <li><a href="#">电影</a></li>
    <li><a href="#">我的微票哟</a></li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
    <form class="navbar-form navbar-left">
    <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <li><a href="#" style="color: white">全国</a></li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
    </ul>
    </li>
    </ul>
    </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->

    </nav>
    </div>
</header>
<section>
    <div id="div" class="container">
        <div class="row">
           <div class="col-lg-7 col-md-7 col-sm-12">
               <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                   <!-- Indicators -->
                   <ol class="carousel-indicators">
                       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                       <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                       <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                       <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                   </ol>

                   <!-- Wrapper for slides -->
                   <div class="carousel-inner" role="listbox">
                       <div class="item active">
                           <img src="image/1.jpg" alt="...">
                           <div class="carousel-caption">

                           </div>
                       </div>
                       <div class="item">
                           <img src="image/2.jpg" alt="...">
                           <div class="carousel-caption">
                           </div>
                       </div>
                       <div class="item">
                           <img src="image/3.jpg" alt="...">
                           <div class="carousel-caption">
                           </div>
                       </div>
                       <div class="item">
                           <img src="image/4.jpg" alt="...">
                           <div class="carousel-caption">
                           </div>
                       </div>


                   </div>

                   <!-- Controls -->
                   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                       <span class="sr-only">Previous</span>
                   </a>
                   <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                       <span class="sr-only">Next</span>
                   </a>
               </div>
           </div>
           <div class="col-lg-2 col-md-3 col-sm-12 col-lg-offset-2 bg"  >
              <!--<div class="divs" >-->
                  <p style="font-size: 24px;font-weight:bold"> 特惠看</p>
                  <img src="image/img1.jpg">
                  <p style="padding-top: 18px">[苏州]2016迷笛电子音乐节(预售)</p>
                  <p style="padding-top: 5px">穿着花裤子喝着小酒通宵达旦</p>
                  <p style="border-top:1px silver dashed;padding-top: 5px"></p>
                  <p style="padding-top: 2px">2016刘若英世界巡回演唱会</p>
                  <p>[上海]百老汇经典音乐剧--《狮子王》</p>
              <!--</div>-->
           </div>
       </div>
   </div>


    <div class="row" style="padding-top: 20px">
        <div class="col-md-1 col-md-offset-1">
            <div class="thumbnail ulimg">
                <img src="image/5.jpg"/><span>[上海]百老汇经典音乐剧《狮子王》</span>
            </div>
        </div>
        <div class="col-md-1 col-md-offset-1">
            <div class="thumbnail ulimg">
                <img src="image/6.jpg"/><span>[北京]陈奕迅 ANOTHER EASON'S LIFE演唱会北京站</span>
            </div>
        </div>
        <div class="col-md-1 col-md-offset-1">
            <div class="thumbnail ulimg">
                <img src="image/10.jpg"/><span>[深圳]逃跑计划2016巡回演唱会深圳站</span>
            </div>
        </div>
        <div class="col-md-1 col-md-offset-1">
            <div class="thumbnail ulimg">
                <img src="image/12.jpg"/><span>[北京]BJCC北京漫控潮流博览会</span>
            </div>
        </div>
        <div class="col-md-1 col-md-offset-1">
            <div class="thumbnail ulimg" style="width: 260px;height: 260px">

                <ul id="myTab" class="nav nav-tabs">
                    <li class="active"><a href="#home" data-toggle="tab">首页</a>
                    </li>
                    <li><a href="#ios" data-toggle="tab">技能课</a></li>
                    
                </ul>
                <p><img src="image/img2.jpg" style="width: 220px;height: 100px;padding-top: 10px"></p>
                <p>[哈尔滨]梁静茹.你的名字是爱情演唱会</p>
                <p style="border-top:1px silver dashed;padding-top: 5px"></p>
                <p>
                    [太原]蔡依林2016PLAY世界巡回演唱会</p>
            </div>

        </div>

    </div>
    <div class="container">
        <div class="row">
    
            <img src="image/ad1.jpg" style="padding-left: 22px;width: 1200px;height: 140px">
        </div>
    </div>

<div class="row" style="padding-top: 20px; padding-left: 25px">
    <div class="col-md-8 col-md-offset-1">
        <ul id="myTab" class="nav nav-tabs" style="width: 855px">
            <li class="active">
                <a href="#home" data-toggle="tab">演唱会</a>
            </li>
            <li><a href="#ios" data-toggle="tab">体育赛事</a></li>

            <li><a href="#ios" data-toggle="tab">舞台剧</a></li>
            <li><a href="#ios" data-toggle="tab">儿童亲子</a></li>
            <li><a href="#ios" data-toggle="tab">音乐会</a></li>
            <li><a href="#ios" data-toggle="tab">展览活动</a></li>
            </li>
        </ul>
    </div>
    <div class="col-md-2" style="background-color: #46b8da;width: 270px;height: 50px;margin-top: 18px;text-align: center">
        <span style="color: white">历历在目</span>
        <span style="font-size: 12px;color: white">- 尽享每天不一样的精彩</span>

    </div>
</div>

    <div class="row" style="padding-top: 10px">

        <div class="col-md-1 col-md-offset-1">
            <div class="thumbnail ulimgs">
                <img src="image/9.jpg"/><p style="padding-left: 5px;padding-top: 5px">[苏州]2016迷笛电子音乐节</p>
                <span style="font-size: 28px;color: #2aabd2;padding-top: 5px">180</span>
            元起
            </div>
            <div class="thumbnail ulimgs">
                <img src="image/13.jpg"/><p style="padding-left: 5px;padding-top: 5px">
                [太原]周杰伦2016世界巡回演唱会太原站(预售)</p>
                <span style="font-size: 28px;color: #2aabd2;padding-top: 5px">280</span>
                元起
            </div>
        </div>
        <div class="col-md-1 col-md-offset-1">
            <div class="thumbnail ulimgs">
                <img src="image/10.jpg"/><p style="padding-left: 5px;padding-top: 5px">[深圳]逃跑计划2016巡回演唱会深圳站</p>
                <span style="font-size: 28px;color: #2aabd2;padding-top: 5px">180</span>
                元起
            </div>
            <div class="thumbnail ulimgs">
                <img src="image/14.jpg"/><p style="padding-left: 5px;padding-top: 5px">

                [太原]2016 李荣浩「有 理想」世界巡回演唱会-太原站</p>
                <span style="font-size: 28px;color: #2aabd2;padding-top: 5px">280</span>
                元起
            </div>
        </div>
        <div class="col-md-1 col-md-offset-1">
            <div class="thumbnail ulimgs">
                <img src="image/11.jpg"/><p style="padding-left: 5px;padding-top: 5px">
                [北京]陈奕迅 ANOTHER EASON'S LIFE演唱会北京站</p>
                <span style="font-size: 28px;color: #2aabd2;padding-top: 5px">380</span>
                元起
            </div>
            <div class="thumbnail ulimgs">
                <img src="image/15.jpg"/><p style="padding-left: 5px;padding-top: 5px">

                [深圳]徐佳莹“日全蚀”深圳演唱会</p>
                <span style="font-size: 28px;color: #2aabd2;padding-top: 5px">380</span>
                元起
            </div>
        </div>
        <div class="col-md-1 col-md-offset-1">
            <div class="thumbnail ulimgs">
                <img src="image/12.jpg"/><p style="padding-left: 5px;padding-top: 5px">
                [青岛]周杰伦2016世界巡回演唱会青岛站(即将开售)</p>
                <span style="font-size: 28px;color: #2aabd2;padding-top: 5px">380</span>
                元起
            </div>
            <div class="thumbnail ulimgs">
                <img src="image/16.jpg"/><p style="padding-left: 5px;padding-top: 5px">

                [太原]2016刘若英"Renext 我敢"世界巡回演唱会太原站</p>
                <span style="font-size: 28px;color: #2aabd2;padding-top: 5px">380</span>
                元起
            </div>
        </div>
        <div class="col-md-3 col-md-offset-1">
            <!--<div class="thumbnail ulimg" style="width: 260px;height: 260px">-->
            <p>今天共演出<span style="color: #5bc0de">9</span>场</p>
            <p>
                <div class="row">
                    <div class="col-md-3">
                        <img src="image/img4.jpg">
                    </div>
                    <div class="col-md-7">
            <p>[天津]天津中华曲苑相声专场</p>
            <span>2016年1月1日~12月31日 天津中华曲苑</span><br>
            <span>50元起</span>
        </div>
    </div>
            </p>
            <hr />
           <p>
               <div class="row">
                   <div class="col-md-3">
                       <img src="image/img5.jpg">
                   </div>
                   <div class="col-md-7">
                    <p>[深圳]刘老根大舞台深圳站</p>
                    <span>2016年3月18日~5月31日 深圳刘老根大舞台</span><br>
                    <span>50元起</span>
                    </div>
               </div>
           </p>
    <hr/>
    </p>
    <hr />
    <p>
        <div class="row">
            <div class="col-md-3">
                <img src="image/img6.gif">
            </div>
            <div class="col-md-7">
    <p>[长沙]大兵笑工场相声晚会</p>
    <span>2016年4月18日~6月27日 湘江剧院</span><br>
    <span>40元起</span>
    </div>
    </div>
    </p>
    <hr />
    <p>
        <div class="row">
            <div class="col-md-3">
                <img src="image/img5.jpg">
            </div>
            <div class="col-md-7">
    <p>[深圳]刘老根大舞台深圳站</p>
    <span>2016年3月18日~5月31日 深圳刘老根大舞台</span><br>
    <span>50元起</span>
    </div>
    </div>
    </p>
    <a>查看今日全部演出</a>

        </div>
        </div>
    <!--<div class="row" style="margin-top: 15px; z-index:1">-->
        <!--<div class="col-md-2 col-lg-offset-1">-->
          <!--<span style="font-size: 28px">场馆推荐</span>-->
        <!--</div>-->
        <!--<div class="col-md-3 col-md-offset-3">-->
            <!--<a>全部商品</a>-->

        <!--</div>-->

    <!--</div>-->
    <div class="row" style="margin-top: 20px">

        <div class="col-md-4 col-md-offset-1">
            <div>
                <span style="font-size: 28px">场馆推荐</span>
            </div>
            <div class="thumbnail ss">
                <img src="image/img7.jpg" style="height: 160px;width: 400px"/>
                <p><h4>近期演出</h4></p>
                <p>[北京]恒源祥戏剧出品大型原创音乐剧《犹太人在上海》
                </p>
                <p>
                    [北京]沪语话剧《永远的尹雪艳》
                </p>
                <p>
                    北京]恒源祥戏剧出品原创话剧《大商海》
                </p>
                <p>
                    [北京]百老汇经典音乐剧《音乐之声》中文版
                </p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="col-md-offset-10">
                <a>全部商品</a>

            </div>
            <div class="thumbnail ss" style="margin-top: 20px">
                <img src="image/img8.jpg"  style="height: 160px;width: 400px"/>
                <p><h4>近期演出</h4></p>
                <p>[北京]2016如果 田馥甄巡回演唱会PLUS北京站(售罄)</p>
            </div>
        </div>
        <div class="col-md-3" style="z-index:3;margin-bottom: 35px"  >
            <div class="thumbnail" style="width: 310px;height: 480px">
                <p><h4>热销榜单</h4></p>
                <hr />
               <div class="row">
                   <div class="col-md-4">
                       <img src="image/5.jpg" style="height: 130px;width: 100px">
                   </div>
                   <div class="col-md-7 col-md-offset-1">
                        <p>
                            [上海]百老汇经典音乐剧《狮子王》
                        </p>
                       <span>
                           2016年1月1日~12月31日 [华特迪士尼大剧院]
                       </span>
                       <span>
                            190 元起
                       </span>
                   </div>
               </div>
                <hr />
                <hr />
                [北京]陈奕迅 ANOTHER EASON'S LIFE
                <p style="border-top:1px silver dashed;padding-top: 5px"></p>
                [深圳]逃跑计划2016巡回演唱会深圳站
                <p style="border-top:1px silver dashed;padding-top: 5px"></p>
                [北京]BJCC北京漫控潮流博览会

                <p style="border-top:1px silver dashed;padding-top: 5px"></p>
                [贵阳]陈奕迅 ANOTHER EASON'S LIFE演唱会贵阳站
                <p style="border-top:1px silver dashed;padding-top: 5px"></p>
                [太原]2016岳云鹏相声专场太原站
                <p style="border-top:1px silver dashed;padding-top: 5px"></p>
            </div>
        </div>
        </div>

</section>
<footer>

    ​

</footer>

<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
<script>
    $(function(){
        $('#carousel-example-generic').carousel({
            interval: 1000
        });
    });
</script>
<script>

    $(function () {
        $('#myTab li:eq(0) a').tab('show');
    });
</script>
</body>
</html>